import React, { createContext, useState } from 'react';
import { Result, Spin, Button } from 'antd';
import errorPng from './error.png';

export const ContentContext = createContext();
const ContentLoading = props => {
  const { children } = props;
  const [isLoading, setIsLoading] = useState(false); // 约定isloading 为"reload"时显示重新加载

  const reload = () => {
    setIsLoading(false);
  };
  return (
    <ContentContext.Provider
      value={{
        setIsLoading,
      }}
    >
      {isLoading === 'reload' && (
        <Result
          icon={<img src={errorPng} className="margin-bottom" />}
          title="抱歉，数据异常~"
          extra={[
            <Button size="large" onClick={reload} key="reload">
              重新加载
            </Button>,
          ]}
        />
      )}
      {isLoading !== 'reload' && (
        <Spin
          size="large"
          spinning={isLoading}
          style={{ position: 'fixed', top: '10%', left: '0%' }}
        >
          {children}
        </Spin>
      )}
    </ContentContext.Provider>
  );
};
export default ContentLoading;
